<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<style>
body{
background-image:url(5.jpg);}

.denglu{
	margin-top: 50px;
	text-align: center;}

.popConsole{
	border-radius: 4%;
	background-color: #77DDFF;
	width: 350px;
	height: 250px;
	position: fixed;
	z-index: 101;
	display: none;
	border: 2px solid gray;
	margin-top: 100px;
	margin-left: 800px;
	font-size: 18px;}
h3{text-align: center;
   color: #ffffff;}
.a1{
	margin-left: 100px;
	font-size: 12px;
    color: #ccc;
    height: 10px;
}
.b1{
	color: red;
	font-size: 5px;
}

button{
	margin-top: 5px;
	margin-left: 100px;
	width:149px ;
}

.a2{
	font-size: 10px;
	color: #ffffff;
	margin-left: 240px;
	margin-top: 15px;
}


</style>


<body>

<div class=denglu>
   <a><input id="denglu1" type="submit" value="点击登录"></a>
   <a><input id="guanbi" type="submit" value="关闭"></a>
</div>


<div class="popConsole" id="popConsole">

<h3>用户登录界面</h3><hr>
      <input class="a1" type="text" name="" id="" value="" placeholder="支持QQ号/邮箱/手机号码登录">
      <input class="a1" type="text" name="" id="" value="" placeholder="密码">
       <input class="a1" type="text" name="" id="" value="" placeholder="验证码"><a class="b1">&nbsp获取验证码</a>
       <button>登录</button>
       <p><a class="a2" href="">忘记密码？注册</a></p>

      
      

</div>

</body>


<script>

var oPopConsole=document.getElementById("popConsole");

var oDenglu=document.getElementById("denglu1");

var oGuanbi=document.getElementById("guanbi");




oDenglu.onclick=function(){
	oPopConsole.style.display="block";}

oGuanbi.onclick=function(){
	oPopConsole.style.display="none"
}

</script>

</html>